<template>
  <div class="my-page-container">
    <div class="my-page-table">
      <table>
        <tr>
          <td class="my-label">项目：</td>
          <td class="my-value">
            <q-select
              class="my-select-box"
              dense
              outlined
              options-dense
              emit-value
              clearable
              option-value="label"
              :options="uivProjectList"
              v-model.lazy="project.cname"
              @update:model-value="onRefreshProject"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">图纸：</td>
          <td class="my-value">
            <q-input
              dense
              outlined
              type="text"
              v-model="canvas.cname"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">背景色：</td>
          <td class="my-value">
            <ColorInput
              v-model:color="canvas.backgroundColor"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">背景图：</td>
          <td class="my-value">
            <ImageSelectBox
              v-model:url="canvas.backgroundImage"
              :app-field-type-arr="fieldTypeList"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">分辨率：</td>
          <td class="my-value">
            <q-select
              dense
              outlined
              options-dense
              emit-value
              option-value="label"
              :options="resolutionTypeList"
              v-model.lazy="canvas.resolution"
              @update:model-value="onRefreshResolution"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">宽度：</td>
          <td class="my-value">
            <q-input
              dense
              outlined
              type="number"
              v-model.lazy.number="myWidth"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">高度：</td>
          <td class="my-value">
            <q-input
              dense
              outlined
              type="number"
              v-model.lazy.number="myHeight"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">服务器：</td>
          <td class="my-value">
            <q-input
              dense
              outlined
              type="text"
              v-model.lazy="canvas.wsAddr"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
        <tr>
          <td class="my-label">端口：</td>
          <td class="my-value">
            <q-input
              dense
              outlined
              type="number"
              v-model.lazy.number="canvas.wsPort"
            />
          </td>
          <td class="my-ext"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useEditorStore } from 'stores/editorStore';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';

const ColorInput = defineAsyncComponent(() => import('components/common/ColorInput.vue'));
const ImageSelectBox = defineAsyncComponent(() => import('components/combination/ImageSelectBox.vue'));


export default defineComponent({
  name: 'ProjectInfo',
  components: {
    ColorInput,
    ImageSelectBox
  },
  setup: function (props, context) {
    //*********************************************************
    // store
    //*********************************************************
    const store = useEditorStore();
    let {
      project,
      canvas
    } = storeToRefs(store);

    //*********************************************************
    // 消息通知
    //*********************************************************
    const {
      showMessage
    } = useMessageNotify();

    //*********************************************************
    // catalog
    //*********************************************************
    const {
      resolutionTypeList,
      fieldTypeList,
      uivProjectList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    //*********************************************************
    // 工具函数
    //*********************************************************
    // 分辨率计算
    const getCanvasResolution = (resolution: string): number => {
      let ration: number = 0;
      switch (resolution) {
        case 'custom': {
          ration = 9 / 16;
          break;
        }
        case '16:9': {
          ration = 9 / 16;
          break;
        }
        case '4:3': {
          ration = 3 / 4;
          break;
        }
        default:
          ration = 1;
          break;
      }

      return ration;
    }

    //*********************************************************
    // 响应数据和函数
    //*********************************************************
    //图纸分类
    let myPageType = computed({
      get: () => {
        let index = fieldTypeList.value.findIndex((item) => (item.id === canvas.value.typeId));
        if (index !== -1) {
          return fieldTypeList.value[index].label;
        } else {
          return '';
        }
      },
      set: (sType: string) => {
        let index = fieldTypeList.value.findIndex((item) => (item.label === sType));
        if (index !== -1) {
          canvas.value.typeId = fieldTypeList.value[index].id;
        }
      }
    });

    // 宽、高和分辨率间关系
    let myWidth = computed({
      get: () => {
        return canvas.value.width;
      },
      set: (w: number) => {
        if (canvas.value.width >= 0) {
          let ration = getCanvasResolution(canvas.value.resolution);
          canvas.value.width = w;
          canvas.value.height = Math.round(w * ration);
        }
      }
    });

    // 宽、高和分辨率间关系
    let myHeight = computed({
      get: () => {
        return canvas.value.height;
      },
      set: (h: number) => {
        if (canvas.value.width >= 0) {
          let ration = getCanvasResolution(canvas.value.resolution);
          canvas.value.height = h;
          canvas.value.width = Math.round(h / ration);
        }
      }
    });

    //宽度不变，高度根据分辨率调整
    const initResolution = () => {
      let ratio = getCanvasResolution(canvas.value.resolution);
      myHeight.value =  ratio * myWidth.value;
    }

    //分辨率发生变化
    const onRefreshResolution = () => {
      initResolution();
    }

    //项目发生变化
    const onRefreshProject = (s: string) => {
      let index = uivProjectList.value.findIndex((item) => (item.label === s));
      if (index !== -1) {
        let id = uivProjectList.value[index].id;
        store.setProject(id, s);
      }
    }

    //*********************************************************
    // 初始化
    //*********************************************************
    //初始化
    const init = () => {
      getUivCatalog(uivCatalogType.RESOLUTION_TYPE_CODE);
      getUivCatalog(uivCatalogType.FIELD_TYPE_CODE);
      getUivCatalog(uivCatalogType.PROJECT_LIST_CODE);
      initResolution();
    }


    // 组件加载
    onMounted(() => {
      init();
    });

    //组件下载
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.RESOLUTION_TYPE_CODE);
      removeUivCatalog(uivCatalogType.PROJECT_LIST_CODE);
      removeUivCatalog(uivCatalogType.FIELD_TYPE_CODE);
    });

    return {
      store,
      project,
      canvas,
      resolutionTypeList,
      uivProjectList,
      fieldTypeList,
      myPageType,
      myWidth,
      myHeight,

      onRefreshResolution,
      onRefreshProject
    };
  }
});
</script>

<style lang="scss" scoped>
.my-page-container {
  overflow-x: hidden;
  overflow-y: hidden;

  .my-page-table {
    padding: 10px;

    .my-label {
      font-weight: bolder;
      text-align: left;
      width: 30%;
      height: 30px;
    }

    .my-value {
      text-align: left;
      width: 70%;
      height: 30px;
    }

    .my-ext {

    }

    .my-select-box {
      overflow:hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
